<template>
  <div class="home">
    <PageHeader></PageHeader>
    <div class="homeContent">
      <div style=" width: 300px;" class="homeTabs">
        <ul>
          <li>对外交流</li>
        </ul>
      </div>
      <div class="homeBrief" v-loading="loading">
        <ul>
          <li v-for="(item, i) in list" :key="i">
            <p :title="item.title" @click="detail(item)">{{ item.title }}</p>
            <span style="font-size: 12px;">{{ item.createTime ? item.createTime.substring(0, 10) : "" }}</span>
          </li>
        </ul>
        <PageInation :total="total" v-model:pageSize="queryParams.pageSize" v-model:page="queryParams.pageNum"
          @pagination="getList()">
        </PageInation>
      </div>
    </div>
  </div>
</template>

<script setup name='EXCHANGE'>
import { GetArticlecategory, GetArticleList } from '@/api/common'
import PageHeader from '../components/PageHeader.vue'
import { ref, onMounted } from 'vue';
import PageInation from '../components/PageInation.vue'
import { useRouter } from 'vue-router';
const router = useRouter()
const list = ref([])
const loading = ref(true)
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  sort: 'createTime',
  sortType: 'descending',
})
const total = ref(0)
const detail = (val) => {
  if (val.authorName == '外部链接') {
    const regex = /<a[^>]*\shref="([^"]+)"[^>]*>([^<]+)<\/a>/gi;
    const doc = regex.exec(val.content)
    if (doc) {
      window.open(doc[1], '_blank')
    } else {
      const href = router.resolve({ path: "/NULL" })
      window.open(href.href, '_blank')
    }
  } else {
    const routerData = router.resolve({ path: "/DetialInformation", query: { id: val.cid } })
    window.open(routerData.href, '_blank')
  }
}
const getList = () => {
  loading.value = true
  GetArticleList(queryParams.value).then((res) => {
    list.value = res.data.data.result
    total.value = res.data.data.totalNum
    loading.value = false
  })
}
const getID = () => {
  loading.value = true
  GetArticlecategory({ name: '对外交流' }).then((res) => {
    queryParams.value.categoryId = res.data.data.result[0].categoryId
    getList()
  })
}
onMounted(() => {
  getID()
})
</script>

<style lang="scss" scoped>
.home {
  margin: 0 auto;
  width: 85%;
  min-height: calc(100vh - 521px);

  .homeContent {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .homeTabs {
      ul {
        list-style: none;
        margin: 0;
        padding: 0;

        li {
          height: 60px;
          line-height: 60px;
          text-align: center;
          cursor: pointer;
          background-image: url(../assets/tab.jpg);
          background-repeat: no-repeat;
          color: #fff;
          font-weight: bolder;
          background-size: 100% 60px;
          font-size: 16px;
        }
      }
    }

    .homeBrief {
      flex: 1;
      overflow: hidden;

      ul {
        margin: 5px 15px 10px 30px;

        li {
          display: flex;
          align-items: center;
          justify-content: space-between;

          p {
            font-size: 16px;
            text-align: left;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 80%;
            margin: 15px 0;
            cursor: pointer;
            border-bottom: 1px solid #fff;
          }

          span {
            width: 80px;
            text-align: right;
          }

          p:hover {
            color: red;
            border-color: red;
          }
        }
      }

      ul li p::before {
        content: "";
        position: absolute;
        border-radius: 50%;
        margin-top: 0.5rem;
        margin-left: -1rem;
        width: 0.4rem;
        height: 0.4rem;
        background: #000;
      }

      p:hover::before {
        background: red;
      }
    }
  }
}
</style>